<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    body {
        background-color: #34495e;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }

    .content {
        height: 400px;
        width: 400px;
        background-color: rgb(44, 235, 193);
        border-radius: 4px;
    }

    .qq {
        display: flex;
    }

    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .s-enter-active,
    .s-leave-active {
        transition: all 1s ease;
    }
    .s-enter,
    .s-leave-to {
        opacity: 0;
    }
</style>


<body>
    <div id="root" class="content">
        <transition>
            <div>
                <button :ref="st" @click="show  = !show">点我！</button>
                <transition s-for="q in qq">
                    <button ref="butt" @click="pp">点我！</button>
                </transition>
                <transition>
                    <div s-if="show">
                        <transition>
                            <div>
                                123
                            </div>
                        </transition>
                    </div>
                </transition>
                <button @click="add">add</button>
                <button @click="del">del</button>
            </div>
        </transition>
    </div>
</body>
<script type="module">
    import Sact from "../src/sact.js";
    import transition from "../src/component/transition.js"
    let qq = Sact.component({
        name: "im-qq",
        template: "<div>im-qq!!!</div>",
        props: ["text"]
    })
    let ww = Sact.component({
        name: "im-ww",
        template: "<div>哈哈哈</div>",
        props: ["text"]
    })
    let pp = 4;
    window.qq = new Sact({
        el: "#root",
        data: {
            qq: [1, 2, 3, 4],
            show: false,
            pci: "12323",
            st: "color",
            ccc: "im-qq",
        },
        method: {
            pp() {
                this.data.ccc = this.data.ccc === "im-ww" ? "im-qq" : "im-ww";
            },
            add() {
                this.data.qq.push(pp++);
            },
            del() {
                this.data.qq.pop();
            }
        },
        component: { qq, ww }
    })
</script>

</html>